<template>
  <div class="app-container">
    <el-card shadow="never" class="table-container">
      <el-descriptions
        class="margin-top"
        title="其他数据统计"
        :column="1"
        border
        style="width: 500px"
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">空气质量检测总数量</div>
          </template>
          {{ data.count }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">空气质量检测良好数量</div>
          </template>
          {{ data.fineCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">省会城市网格覆盖范围</div>
          </template>
          {{
            data.mainCapitalRate ? data.mainCapitalRate.toFixed(4) * 100 : 0
          }}%
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">大城市网格覆盖范围</div>
          </template>
          {{
            data.mainBigCityRate ? data.mainBigCityRate.toFixed(2) * 100 : 0
          }}%
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import AqiAPI from "@/api/aqi";
import ProvinceAPI from "@/api/province";
import { ElMessage } from "element-plus";

const data: any = ref({});

function reqData() {
  AqiAPI.getOtherStatistic().then((res) => {
    console.log(res);
    data.value = res;
  });
}

onMounted(() => {
  reqData();
});
</script>
